<template>
	<view v-if="isObjNone(revenue)">
<!--		<view class="h-20 back-color-h"></view>-->
		<view class="start m-t-20">
			<view class="flex-between">
        <view>
          <image src="@/static/images/index/ic_zichan@2x.png"  style="width:50px;" mode="widthFix"></image>
        </view>
				<view class="m-t-4 font-24 color-a">
          {{select_assets.address}}
          <view class="font-32 color-d m-t-10">
            {{select_assets.province_name}}{{select_assets.city_name}}{{select_assets.district_name}}
          </view>
        </view>
				<view class="font-28 color-a font-weight-500 zizhan-status wqy" v-if="select_assets.contract_status === 0">未签约</view>
				<block v-else>
					<block v-if="select_assets.status === 1">
						<view class="font-28 color-b font-weight-500 zizhan-status yyz">运营中</view>
					</block>
					<block v-else>
						<view :class="select_assets.renovation_status<60?'bg2':'bg3'">
						<view class="font-28  font-weight-500 zizhan-status">{{select_assets.renovation_status_name}}</view>

						</view>
					</block>
				</block>

			</view>
<!--			<view class="m-t-4 font-24 color-a">
				{{select_assets.province_name}}{{select_assets.city_name}}{{select_assets.district_name}}
			</view>-->
		</view>
		<block v-if="select_assets.contract_status === 1 && select_assets.status != 1">
<!--      装修中-->
      <view class="color-a flex font-24 radius-16 flex-center m-30">
        <view class="df fdc row-center text-center radius-16 color-d m-r-142" :class="zxzIndex == 1 ? 'checked' : 'uncheck' " @click="zxzCheckItem(1)">
          <text class="m-t-20 m-b-20 font-25">装修进度</text>
        </view>
        <view class="df fdc row-center text-center radius-16 color-d " :class="zxzIndex == 2 ? 'checked' : 'uncheck' " @click="zxzCheckItem(2)">
          <text class="m-t-20 m-b-20 font-25">签约信息</text>
        </view>
<!--        <view class="df fdc row-center text-center radius-16 color-d " :class="zxzIndex == 3 ? 'checked' : 'uncheck' " @click="zxzCheckItem(3)">-->
<!--          <text class="m-t-20 m-b-20 font-25">装修方案</text>-->
<!--        </view>-->
<!--        <view class="df fdc row-center text-center radius-16 color-d " :class="zxzIndex == 4 ? 'checked' : 'uncheck' " @click="zxzCheckItem(4)">-->
<!--          <text class="m-t-20 m-b-20 font-25">运营方案</text>-->
<!--        </view>-->
      </view>


      <view v-if="zxzIndex == 1">

<!--        分期付款-->
        <view class="color-a flex font-24 radius-16 m-30 text-center " v-if="asset.total_cost" >
			<view :style="stage_w" v-for="(item,j) in stage">
          <view  class="df fdc row-center text-center " v-if="item.status">
            <view class="flex-col p-l-20 p-r-20">
              <text class="m-t-20 m-b-5 font-25 n_color color-blue">{{item.money}}</text>
              <text class="m-t-20 m-b-5 font-25 t_color color-blue">{{item.name}}</text>
            </view>
            <view class="flex">
              <view class="line-left border-color-blue"></view>

              <view class="line-middle line-middle-blue"></view>
              <view class="line-right border-color-blue"></view>
            </view>
          </view>
          <view class="df fdc row-center text-center " v-else>
            <view class="flex-col p-l-20 p-r-20">
              <text class="m-t-20 m-b-5 font-25 n_color">{{item.money}}</text>
              <text class="m-t-20 m-b-5 font-25 t_color">{{item.name}}</text>
            </view>
            <view class="flex">
              <view class="line-left"></view>
              <view class="line-middle"></view>
              <view class="line-right"></view>
            </view>
          </view>
          </view>
        </view>

        <view class="m-t-60 m-b-30 color-d font-28 font-weight-500 p-l-30" >装修进度</view>
        <view class="zichan-zx" v-for="(item, i) in renovationsList" :key="i">
          <view class="zichan-sjz">
            <view class="p-l-30 p-r-30">
              <cover-image v-if="i==0" src="/static/images/user/zichan-sjz1.png"></cover-image>
              <cover-image v-else src="/static/images/user/zichan-sjz2.jpg"></cover-image>
            </view>
            <view class="zichan-line"></view>
          </view>
          <view class="zichan-content">
			  <view class="flex-between" style="margin-bottom: 26rpx;">
				  <view v-if="item.process_name">
					  <view><text  style="color: #1A1A1A;font-size: 32rpx;line-height: 48rpx;">{{item.process_name}}</text>
					  </view>
					  <view><text v-if="item.pdf" style="color: #FB2D19;" @click="open2(item)">确认单</text>
				 </view>
					   </view>

				  <!-- <view v-else><u-parse style="color: #1A1A1A;font-size: 32rpx;line-height: 48rpx;" class="m-b-10" :content="item.memo"></u-parse><text v-if="item.pdf" style="color: #FB2D19;" @click="open2(item)">材料确认单</text></view> -->

				  <view v-if="item.confirm" style="width: 128rpx;height: 48rpx;border-radius: 30rpx;text-align: center;background-color: #CCCCCC;margin-right: 30rpx;">
					  <text style="color: #FFFFFF;font-size: 24rpx;line-height: 48rpx;">已确认</text>
				  </view>
				  <view v-else-if="item.need" style="width: 128rpx;height: 48rpx;border-radius: 30rpx;text-align: center;background-color: #FB2D19;margin-right: 30rpx;" @click="open1(item,i)">
				  					  <text style="color: #FFFFFF;font-size: 24rpx;line-height: 48rpx;">确认</text>
				  </view>
			  </view>

            <view class="zichan-box">
				<view class="flex-between">
					<view class="color-a m-b-10 font-24">{{baseFunction.js_date(item.update_time)}}</view>

				</view>

			  <text>{{item.desc}}</text>
			  <!-- <text v-if="item.title">{{item.title}}</text> -->
              <!-- <u-parse v-else class="m-b-10" :content="item.memo"></u-parse> -->
              <view class="zichan-content-img-box">
                <cover-image class="zichan-content-img" v-for="(item2, j) in item.image_urls" :key="j" :src="item2" @click="showImg(item2)"></cover-image>
                <cover-image v-if="item.video_url" class="zichan-content-img" @click="showVideo(item.video_url)" src="/static/images/user/zichan-sjz3.jpg"></cover-image>
              </view>
            </view>
          </view>
        </view>
		<!-- <bottom-button @click="open1()" v-if="select_assets.renovation_status >0&select_assets.entry_time==''">进场确认</bottom-button> -->

		<!-- <bottom-button @click="agree(select_assets)" v-if="select_assets.renovation_status === 6">同意上线</bottom-button> -->
		<!-- <bottom-button @click="agree(select_assets)" v-if="select_assets.renovation_status === 6">同意上线</bottom-button> -->
		<view v-if="select_assets.renovation_status === 60" style="width: 100%;height: 67px;"></view>
        <bottom-button @click="agree(select_assets)" v-if="select_assets.renovation_status === 60">同意上线</bottom-button>
		<uni-popup ref="popup2" type="center" >

		<pdfView :pdfSrc="pdf_re"></pdfView>
		</uni-popup>
		<uni-popup ref="popup1" type="center" >
			<view style="">
				<view class="w-580 " style="background-color: #fff;border-radius: 24rpx;overflow: hidden;">
					<view style="margin: 36rpx auto 50rpx auto;text-align: center;">
						<text style="font-size: 32rpx;line-height: 44rpx;">{{select_re.process_name}}确认</text>
					</view>

						<view v-if="select_re.sms">
							<view class="flex-between mobile_v" >

								<text style="color: #1A1A1A;font-size: 28rpx;line-height: 84rpx;">{{mobile}}</text>

						</view>
						<view class="flex-between mobile_v" style="margin-top: 28rpx;">
							<view class="uni-form-item uni-column" style="width: 50%;">
									<input v-model="verify" type="number" class="uni-input" style="color:#1A1A1A;font-size: 28rpx;line-height: 84rpx;" placeholder-style="color:#808080" placeholder="请输入验证码" />
							</view>

							<text class="text_sm" @click="getVerificationCode"  style="color: #000;font-size: 28rpx;line-height: 84rpx;">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</text>
						</view>
						</view>
					<!-- <view class="flex title_v" style="margin-top: 28rpx;">

							<text style="color: #808080;font-size: 28rpx;line-height: 40rpx;">{{select_re.desc}}</text>

					</view> -->
					<view class="mobile_v" style="height: 96rpx;margin-top: 80rpx;margin-bottom: 36rpx;border-radius: 16rpx;background-color: #FB2D19;text-align: center;" @click="confirm_entry">
						<text style="font-size: 32rpx;line-height: 96rpx;color: #fff;">确认</text>
					</view>
					<!-- <button @click="close">关闭</button> -->

				</view>
			</view>

		</uni-popup>

      </view>
      <view v-else-if="zxzIndex == 2">
        <view class="flex-between box-shadow m-30 p-30 radius-20">
          <view style="color:#808080;">签约日期</view>
          <view style="color:#1A1A1A;font-weight: bold;">{{asset.sign_time | date('yyyy-mm-dd')}}</view>
        </view>
        <view class="flex-between box-shadow m-30 p-30 radius-20">
          <view style="color:#808080;">合同金额</view>
          <view style="color:#1A1A1A;font-weight: bold;">￥{{ numFormat(asset.total_cost) }}</view>
        </view>
        <view class="flex-between box-shadow m-30 p-30 radius-20">
          <view style="color:#808080;">保底月租金</view>
          <view style="color:#1A1A1A;font-weight: bold;">￥{{ numFormat(asset.guarant_income) }}</view>
        </view>
        <!-- <view class="flex-between box-shadow m-30 p-30 radius-20">
          <view style="color:#808080;">运营开始时间</view>
          <view style="color:#1A1A1A;font-weight: bold;">{{asset.start_time | date('yyyy-mm-dd')}}</view>
        </view>
<view class="flex-between box-shadow m-30 p-30 radius-20">
          <view style="color:#808080;">运营结束时间</view>
          <view style="color:#1A1A1A;font-weight: bold;">{{asset.end_time | date('yyyy-mm-dd')}}</view>
        </view> -->
      </view>
      <view v-else-if="zxzIndex == 3">
        <pdfView :pdfSrc="asset.decoration_plan"></pdfView>
      </view>
      <view v-else-if="zxzIndex == 4">
        <pdfView2 :pdfSrc="asset.operation_plan"></pdfView2>
      </view>


		</block>
		<block v-else>
<!--      未签约-->
      <view class="color-a flex font-24 radius-16 flex-between m-30">
        <view class="df fdc row-center text-center radius-16 color-d " :class="wqyIndex == 1 ? 'checked' : 'uncheck' " @click="wqyCheckItem(1)">
          <text class="m-t-20 m-b-20 font-30">报价方案</text>
        </view>
<!--        <view class="df fdc row-center text-center radius-16 color-d " :class="wqyIndex == 2 ? 'checked' : 'uncheck' " @click="wqyCheckItem(2)">-->
<!--          <text class="m-t-20 m-b-20 font-30">装修方案</text>-->
<!--        </view>-->
<!--        <view class="df fdc row-center text-center radius-16 color-d " :class="wqyIndex == 3 ? 'checked' : 'uncheck' " @click="wqyCheckItem(3)">-->
<!--          <text class="m-t-20 m-b-20 font-30">运营方案</text>-->
<!--        </view>-->
      </view>

      <view v-if="wqyIndex == 1">

        <view class="m-t-60 m-b-30 color-d font-35 font-weight-800 p-l-30" v-if="select_assets.contract_status === 0">签约后预估收益</view>
        <view class="m-t-60 m-b-30 color-d font-35 font-weight-800 p-l-30" v-else>上月实际收益</view>

        <view class="p-l-30 p-r-30 p-b-30">
          <view class="color-a flex font-24 p-25 radius-16 box-shadow">
            <view class="flex-1 df fdc row-center">
              <text class="font-56 color-d font-weight-500">{{fil_money(parseFloat(expectObj.income))}}</text>
              <text class="m-t-20">预计每月收益(元)</text>
            </view>
            <view class="w-2 h-40 back-color-i"></view>
            <view class="flex-1 df fdc row-center col-bottom">
              <text class="font-56 color-d font-weight-500">{{(fil_money(parseFloat(expectObj.income)-parseFloat(expectObj.price_month))) }}</text>
              <text class="m-t-20">{{select_assets.contract_status === 0 ? '每月躺赚(元)' :'总收益(元)'}}</text>
            </view>
          </view>



          <!-- <view class="back-color-h color-a flex font-24 p-25 radius-16 m-t-30">
            <view class="flex-1 df fdc row-center">
              <text class="font-56 color-d font-weight-500">{{numFormat(revenue.in_number_total_revenue)}}</text>
              <text class="m-t-20">{{select_assets.contract_status === 0 ? '每月预估总收益(元)' : '上月总收益(元)'}}</text>
            </view>
            <view class="w-2 h-40 back-color-i"></view>
            <view class="flex-1 df fdc row-center col-bottom">
              <text>保底收益<text
                  class="color-d font-weight-500 font-28 m-l-8 m-r-8">{{(revenue.in_number_guarant_income / 10000).toFixed(2)}}</text>万元</text>
              <text class="m-t-32">分红收益<text
                  class="color-d font-weight-500 font-28 m-l-8 m-r-8">{{(revenue.in_number_amount / 10000).toFixed(2)}}</text>万元</text>
            </view>
          </view> -->

          <view class="color-a flex font-24 m-t-30">
            <view class="flex-1 df fdc row-center text-center p-25 radius-16 box-shadow-low">
              <text class="font-40 color-d font-weight-500">{{fil_money(parseFloat(expectObj.price_per_month))}}</text>
              <text class="m-t-20">预计月租金(元)</text>
            </view>
            <view class="flex-1 df fdc row-center text-center p-25 radius-16 box-shadow-low">
              <text class="font-40 color-d font-weight-500">{{fil_money(parseFloat(expectObj.price_per_all))}}</text>
              <text class="m-t-20">预计运营期内总回报(元)</text>
            </view>
          </view>

          <view class="color-a flex font-24 m-t-30">
            <view class="flex-1 df fdc row-center text-center p-25 radius-16 box-shadow-low">
              <text class="font-40 color-d font-weight-500">{{fil_money(parseFloat(expectObj.price_month))}}</text>
              <text class="m-t-20">每月分期支出(元)</text>
            </view>
            <view class="flex-1 df fdc row-center text-center p-25 radius-16 box-shadow-low">
              <text class="font-40 color-d font-weight-500">{{fil_money(parseFloat(expectObj.transform_amount))}}</text>
              <text class="m-t-20">总投资(元)</text>
            </view>
          </view>

<!--          <view class="color-a flex font-24 p-25 radius-16 m-t-30 box-shadow">
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{(select_assets.contract_status === 0 ? revenue.min_income : revenue.guarant_income).toFixed(0)}}</text>
              <text class="m-t-20">{{select_assets.contract_status === 0 ? '预估保底收益(元/月)' : '保底收益(元)'}}</text>
            </view>
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{(select_assets.contract_status === 0 ? revenue.income : revenue.dividends_income).toFixed(0)}}</text>
              <text class="m-t-20">{{select_assets.contract_status === 0 ? '预估收益(元/月)' : '分红收益(元)'}}</text>
            </view>
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{(select_assets.contract_status === 0 ? revenue.operating_cost : revenue.pre_month_operate_price).toFixed(0)}}</text>
              <text class="m-t-20">{{select_assets.contract_status === 0 ? '预估运营成本(元/月)' : '运营成本(元)'}}</text>
            </view>
          </view>-->

          <view class="p-25 radius-16 m-t-30 box-shadow">
            <view class="flex-between m-b-30 m-t-15">
              <text class="font-35 color-a">预计日租金(元)</text>
              <text class="font-35 color-a font-weight-500">{{numFormat(expectObj.price_per_day)}}</text>
            </view>
            <hr />
            <view class="flex-between m-b-30  m-t-30">
              <text class="font-35 color-a">预计运营成本(元)</text>
              <text class="font-35 color-a font-weight-500">{{numFormat(expectObj.operating_cost)}}</text>
            </view>
            <hr />
            <view class="flex-between m-b-15  m-t-30">
              <text class="font-35 color-a">预计保底收益(元)</text>
              <text class="font-35 color-a font-weight-500">{{numFormat(expectObj.min_income)}}</text>
            </view>
          </view>



        </view>
		<view class="p-l-30 p-r-30">
			<view class="m-b-15">
			  <text class="font-20 color-a">收益计算公式：

预计每月收益=预计保底收益+(预计月租金-预计保底收益-预计运营成本)*80%
[保底超出部分收取20%运营分成]

每月躺赚=预计每月收益-每月分期支出
</text>
			  </view>
			</view>
		<view style="height: 15vh;"></view>
        <bottom-button  v-if="select_assets.contract_status === 0">立即签约</bottom-button>
		<!-- <bottom-button @click="show = true" v-if="select_assets.contract_status === 0">立即签约</bottom-button> -->
      </view>
      <view v-else-if="wqyIndex == 2">
        <pdfView :pdfSrc="asset.decoration_plan"></pdfView>
      </view>
      <view v-else-if="wqyIndex == 3">
        <pdfView2 :pdfSrc="asset.operation_plan"></pdfView2>
      </view>
		</block>

		<u-popup :show="show" @close="show = false" round="20" mode="bottom">
			<view>
				<view class="h-114 text-center lh-114 font-32 color-d border-bottom-999"
					@click="jump('/pages/contract/create-contract?type=2')">京瑞居房屋装修合同</view>
				<view @click="jump('/pages/contract/create-contract?type=1')"
					class="h-114 text-center lh-114 font-32 color-d">
					京瑞居房屋运营合同</view>
				<view class="h-16 back-color-h"></view>
				<view class="h-114 text-center lh-114 font-32 color-d" @click="show = false">取消</view>
			</view>
		</u-popup>
		<u-popup :show="videoShow" @close="videoShow = false" round="20" mode="center">
			<video :src="videoUrl" enable-danmu danmu-btn controls></video>
		</u-popup>
		<u-popup :show="imgShow" @close="imgShow = false" round="20" mode="center">
			<cover-image :src="imgUrl"></cover-image>
		</u-popup>
	</view>
</template>

<script>
	import baseFunction from '@/utils/base.js'
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		name: "assetsDetails",
		data() {
			return {
				mobile:'',
				verify:'',
				countdown:'',
				show: false,
				videoShow:false,
				videoUrl:'',
				imgShow:false,
				imgUrl:'',
				id: '',
				revenue: {},
				pdf_re:'',
        wqyIndex:1,// 未签约 index
        zxzIndex:1,// 装修中 index
				renovationsList:[],
				expectObj:[],
				asset:[],
				stage:[],
				stage_w:{},
				baseFunction:baseFunction,
				select_re:{}
			}
		},
		onLoad(ops) {
			this.mobile=this.user.mobile
			console.log(this.select_assets)
			if (ops.id) {
				this.id = ops.id
				this.getHousingTotalRevenue()
				this.getAssetRenovationsList();
				if(this.select_assets.contract_status == 0) {
					uni.setNavigationBarTitle({
					  title: '资产未签约'
					})
				  }  else {

				  if (this.select_assets.status == 1) {
				  uni.setNavigationBarTitle({
					title: '资产运营中'
				  })
				} else {
					uni.setNavigationBarTitle({
					  title: '资产装修中'
					})
				  }

				}
			}
		},
		computed: {
			dayNum() {
				let time = new Date()
				let month = time.getMonth() === 0 ? 1 : time.getMonth(),
					year = time.getMonth() === 0 ? time.getFullYear() - 1 : time.getFullYear()
				return new Date(year, month, 0).getDate()
			}
		},
		methods: {
			async confirm_entry(){
				if(this.verify==''){
					uni.showToast({
						title:"请填写验证码",
						duration:2000,
						icon:'none'
					})
					return
				}
				const res = await this.$api.common.landlord('confirmAll', {
					assets_id: this.id,
					mobile:this.mobile,
					verify:this.verify,
					process_id:this.select_re.process_id,
					id:this.select_re.id,
				})
				if (res.code === 200) {
					// this.select_assets.entry_time=res.data
					let now=this.select_re.key
					this.renovationsList[now].confirm=1
					this.$refs.popup1.close()
					uni.showToast({
						icon:"success"
					})

				}
			},
			async getHousingTotalRevenue() {
				const res = await this.$api.common.landlord('getHousingTotalRevenue', {
					time: '',
					assets_id: this.id
				})
				if (res.code === 200) {
					this.revenue = res.data
				}
			},
			agree(item){
				//console.log(item);
				if(item.check_url){
					location.href=item.check_url;
				}else{
					this.showMsg('请等待合约上传')
				}
			},
			async getVerificationCode() {

				if(this.countdown>0){
					return
				}
				const res = await this.$api.common.promotion('send', {mobile:this.mobile,scene:'confirm_'+this.select_re.process_id})
				if (res.code === 200) {
				  // 模拟发送验证码的操作
				  // console.log('验证码已发送');
				  uni.showToast({
				  	title:res.message,
				  	duration:2000,
				  	icon:'none'
				  })
				  // 设置倒计时的秒数，如60秒
				  this.countdown = 60;

				  // 设置倒计时
				  this.intervalId = setInterval(() => {
				    if (this.countdown > 0) {
				      this.countdown -= 1;
				    } else {
				      clearInterval(this.intervalId);
				    }
				  }, 1000);
				}

			},
      wqyCheckItem(index){
        this.wqyIndex = index;
			},

			            fil_money(value) {
							console.log(value)
			                if (!value) return '0.00';
			                var value = value.toFixed(2);//提前保留两位小数
			                var intPart = Number(value).toFixed(0); // 获取整数部分
			                var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断 ？？？
			                var floatPart = '.00'; // 预定义小数部分
			                value = value.toString();//将number类型转为字符串类型，方便操作
			                var value2Array = value.split('.');
			                if (value2Array.length === 2) { // =2表示数据有小数位
			                  floatPart = value2Array[1].toString(); // 拿到小数部分
			                  if (floatPart.length === 1) { // 补0,实际上用不着
			                      return intPartFormat + '.' + floatPart + '0';
			                  } else {
			                      return intPartFormat + '.' + floatPart;
			                  }
			                } else {
			                  return intPartFormat + floatPart;
			                }
			            },


      zxzCheckItem(index){
        this.zxzIndex = index;
			},
			async getAssetRenovationsList() {
				const res = await this.$api.common.landlord('getAssetRenovationsList', {
					time: '',
					assets_id: this.id
				})
				if (res.code === 200) {
					for(let i = 0; i<res.data.list.length;i++){
						if(res.data.list[i]['image_url'])
						res.data.list[i]['image_urls'] = baseFunction.js_split(res.data.list[i]['image_url']);
						else
						res.data.list[i]['image_urls']=[]
					}
					//console.log(res.data.list);
          this.asset = res.data.asset
		  this.stage = res.data.stage
		  this.stage_w={width:parseInt(100/res.data.stage.length)+"%"}

					this.renovationsList = res.data.list
          this.expectObj = res.data.expect

		  if(this.expectObj==null){
			  this.expectObj={
				  min_income:0,
				  operating_cost:0,
				  price_per_day:0,
				  transform_amount:0,
				  price_per_all:0,
				  price_per_month:0,
				  price_month:0,
				  income:0
			  }
		  }
				}
			},
			showVideo(url){
				if(url){
					this.videoUrl = url;
					this.videoShow = true;
				}

			},
			showImg(url){
				if(url){
					this.imgUrl = url;
					this.imgShow = true;
				}

			},
			async open1(e,key){
				if(e.sms){
					this.select_re=e
					this.select_re.key=key
					this.$refs.popup1.open('center')
				}else{
					const res = await this.$api.common.landlord('confirmAll', {
						assets_id: this.id,
						process_id:e.process_id,
						id:e.id,
					})
					if (res.code === 200) {
						// this.select_assets.entry_time=res.data
						let now=key
						this.renovationsList[now].confirm=1
						uni.showToast({
							icon:"success"
						})

					}
				}

			},
			open2(e){
				this.pdf_re=e.pdf
				this.$refs.popup2.open('center')
			}
		}
	}
</script>



<style lang="scss" scoped>
	page {
		background-color: $c;
	}
	.start {
		height: 160rpx;
		color: $d;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.1);
    margin:0 30rpx;
    border-radius: 16rpx;

	}
  .zizhan-status{
    //color:#fff;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 12px;
  }
  .wqy {
    color:#808080;
    background-color: #ECECEC;
  }
  .zxz {
    color:#FB2D19;
    background-color: #FEEAE8;
  }
  .yyz {
    color:#09CDD5;
    background-color: #E6F9FA;
  }
	.color-yellow {
		color:#FF9F22;
	}
	.zichan-zx{ display: flex; margin-bottom: 10px;}
	.zichan-sjz{ width: 20%; text-align: center; overflow: hidden;}
	.zichan-line{ width: 0px; min-height: 75px; height: 100%; border: 1px dashed #999999; display: inline-block; margin:10px 0 0 0; border-top: none; border-bottom: none;}
	.zichan-content{ width: 80%;}
	.zichan-box{ background-color:#f5f5f5; padding: 5px 10px; border-radius: 8px; margin-right: 30rpx; min-height: 136rpx;}
	.zichan-content-img-box{ display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px;}
	.zichan-content-img{ width: 22%; margin:3px;}

  .n_color { color:#808080;font-weight: bold }
  .t_color { color:#1A1A1A }
  .color-blue { color:#FB2D19 }
  .line-left { height:0px;width:40%; border: 1px solid #ECECEC;margin-top: 10px;padding-left: 20px;}
  .line-middle { height: 0px;width:2%; border: 3px solid #ECECEC;margin-top: 10px;}
  .line-right { height:0px;width:40%; border: 1px solid #ECECEC;margin-top: 10px;padding-right: 20px;}
  .border-color-none { height:0px;width:40%; border: 1px solid #FFFFFF;margin-top: 10px; }
  .border-color-blue { height:0px;width:40%; border: 1px solid #FB2D19;margin-top: 10px; }
  .line-middle-blue { eight: 0px;width:2%; border: 3px solid #FB2D19;margin-top: 10px;radius:8px; }
  .centered {
         position: absolute; /* 相对定位 */
         top: 50%; /* 将元素向上移动自身高度的一半 */
         left: 50%; /* 将元素向左移动自身宽度的一半 */
         transform: translate(-50%, -50%); /* 根据自身大小调整位置 */
     }
	 .mobile_v{
		 background-color: #F7F9FF;
		 width: 436rpx;
		 height: 84rpx;
		 border-radius: 12rpx;
		 margin: auto;
		 padding-left: 24rpx;
		 padding-right: 24rpx;
	 }
	 .title_v{

	 		 width: 436rpx;


	 		 margin: auto;

	 }
</style>
